<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <title>流程图DEMO - 特殊形状的节点</title>
    <!--[if lt IE 9]>
    <?import namespace="v" implementation="#default#VML" ?>
    <script type="text/javascript" src="https://cdn.bootcss.com/json2/20160511/json2.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="../assets/img/favicon.png" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="../dist/GooFlow.min.css"/>
</head>
<body>
<div id="demo" style="width:100%;height:540px;"></div>
<div id="demo2" style="width:100%;height:30px;"></div>
请输入缩放值：<input type="text" id="scaleValue" value="0.5"/>
<input id="scale" type="button" value='缩放' onclick="ResetScale()"/>
<input id="submit" type="button" value='导出结果' onclick="Export()"/>
<input id="clear" type="button" value='清空' onclick="demo.clearData()"/>
<textarea id="result" row="6"></textarea>
<script src="../assets/js/demo_sp_node.js"></script>
<script type="text/javascript">
    var property={
        auth:auth,
        toolBtns:["start round mix","end round","task","node capsule","chat parallelogram","state","plug","join rhomb","fork rhomb","complex ellipse mix"],
        haveHead:true,
        headLabel:true,
        headBtns:["new","open","save","undo","redo","reload","print"],//如果haveHead=true，则定义HEAD区的按钮
        haveTool:true,
		haveDirDashed:true,
		haveSegment:true,
		haveSegDashed:true,
        haveGroup:true,
        useOperStack:true
    };
    var demo;
    $(document).ready(function(){
        //demo=$.createGooFlow("#demo",property);
        demo=GooFlow.init("#demo",property);
        //demo.setNodeRemarks(remark);
        demo.loadData(jsondata);
        //demo.reinitSize(1000,520);
        demo.onItemRightClick=function(id, type){
            console.log("onItemRightClick: "+id+","+type);
            return true;//返回false可以阻止浏览器默认的右键菜单事件
        };
        demo.onItemDbClick=function(id, type){
            console.log("onItemDbClick: "+id+","+type);
            //return false;//返回false可以阻止原组件自带的双击直接编辑事件
        };
        demo.onBtnSaveClick=function(){
            demo.exportDiagram('myFlow');//流程图导出图片功能
        }
        demo.onPrintClick=function(){
            demo.print(1);
        };
    });
    function Export(){
        document.getElementById("result").value=JSON.stringify(demo.exportData());
    }
    function ResetScale(){
        demo.resetScale( parseFloat(document.getElementById("scaleValue").value) );
    }
    window.onresize=function(){
        demo.reinitSize(window.innerWidth-15,window.innerHeight-30);
    }
</script>
</body>
</html>
